<template>
  <view
    class="aside-control"
    :class="{
      actived: controlProps.actived,
      disabled: controlProps.disabled,
      'plain-disabled': controlProps.plainDisabled,
    }"
    @click="onClick"
  >
    <view v-if="controlProps.icon" class="row icon-row">
      <image v-if="controlProps.actived" class="icon" mode="widthFix" :src="controlProps.iconActive"></image>
      <image v-else class="icon" mode="widthFix" :src="controlProps.icon"></image>
    </view>
    <view v-if="controlProps.title" class="row title-row">
      <text v-if="controlProps.actived && controlProps.titleActive" class="title">{{
        $t(controlProps.titleActive)
      }}</text>
      <text v-else class="title">{{ $t(controlProps.title) }}</text>
    </view>
    <view v-if="controlProps.desc" class="row desc-row">
      <text v-if="controlProps.actived && controlProps.descActive" class="desc">{{ $t(controlProps.descActive) }}</text>
      <text v-else class="desc">{{ $t(controlProps.desc) }}</text>
    </view>
    <view v-if="controlProps.tipText" class="tip-popup" :class="`placement-${controlProps.tipPlacement}`">
      <text>{{ controlProps.tipText }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { AsideRoles, useControlState } from '@/controller/BaseAppliance/useControl'
import { trackEvent, TrackType } from '@/dataReport/tracks'

export interface AsideControlProps {
  // 图标按钮
  icon?: string
  iconActive?: string
  // 文字按钮
  title?: string
  titleActive?: string
  // 文字描述
  desc?: string
  descActive?: string
  // 是否被完全禁用操作
  disabled?: boolean
  // 是否显示禁用样式 (仍然可点击触发操作)
  plainDisabled?: boolean
  // 是否高亮
  actived?: boolean
  // 提示框
  tipText?: string | null
  tipPlacement?: 'top' | 'bottom'
}

/**
 * Props
 */
interface PropTypes extends AsideControlProps {
  // 预设按钮类型
  role?: AsideRoles
  control?: BaseController.Control
  // 覆盖预设配置
  overwrites?: Partial<AsideControlProps> | null
  prevent?: boolean
}
const props = withDefaults(defineProps<PropTypes>(), {
  tipPlacement: 'top',
})

/**
 * Emit
 */
const emit = defineEmits<{
  (e: 'change', actived?: boolean): void
  // 预设配置触发的事件
  (e: 'power-change'): void
  (e: 'child-lock-change', value: boolean): void
}>()

/**
 * Preset
 */
type PresetControlProps = AsideControlProps & { onClick: () => any }
const controlState = props.control ? useControlState(props.control) : null
const PresetControlMaps: Record<AsideRoles, ComputedRef<PresetControlProps>> = {
  [AsideRoles.Power]: computed(() => {
    if (props.control?.store.isVirtualAppliance) {
      return {
        icon: '/pages/appliance/static/TurnOn.png',
        iconActive: '/pages/appliance/static/TurnOn.png',
        actived: true,
        onClick: () => {},
      }
    }
    const actived = controlState?.isPowerOn.value
    const disabled = controlState?.powerDisabled.value
    return {
      icon: '/pages/appliance/static/TurnOn.png',
      iconActive: '/pages/appliance/static/TurnOn.png',
      actived,
      disabled: props.control?.store.isOffline === true,
      plainDisabled: disabled,
      tipPlacement: 'top',
      onClick: () => {
        if (!props.control || !controlState) throw new Error('control required!')
        emit('power-change')
        if (props.prevent) return
        return props.control.store.togglePowerState()
      },
      ...props.overwrites,
    }
  }),
  // [AsideRoles.ChildLock]: computed(() => ({
  //   title: '童锁',
  //   desc: '已关闭',
  //   descActive: '已开启',
  //   actived: controlState?.childLockOn.value,
  //   disabled: controlState?.childLockDisabled.value,
  //   onClick: () => {
  //     if (!props.control || !controlState) throw new Error('control required!')
  //     const targetState = !controlState.childLockOn.value
  //     emit('child-lock-change', targetState)
  //     return props.control.store.changeChildLock(targetState)
  //   },
  //   ...props.overwrites,
  // })),
}

const controlProps = computed<AsideControlProps>(() => {
  if (props.role && PresetControlMaps[props.role]) {
    const Preset = PresetControlMaps[props.role]
    return Preset.value
  }

  return {
    icon: props.icon,
    iconActive: props.iconActive,
    title: props.title,
    titleActive: props.titleActive,
    desc: props.desc,
    descActive: props.descActive,
    disabled: props.disabled,
    plainDisabled: props.plainDisabled,
    actived: props.actived,
  }
})

function onClick() {
  // HVN的只有一个闹钟点击事件，不触发指令下发
  if (props.control?.store._datasource.type !== 'HVN') {
  } else {
    trackEvent('HVN.Alarm.Title.Text', {}, TrackType.ApplianceDetail)
  }
  if (props.role && PresetControlMaps[props.role]) {
    const Preset = PresetControlMaps[props.role]
    Preset.value.onClick()
    return
  }
  emit('change', controlProps.value.actived)
}
</script>

<style scoped lang="less">
.aside-control {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 88rpx;
  height: 88rpx;
  margin-bottom: 20rpx;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 2px 15px rgba(19, 27, 53, 0.08);
  color: var(--dark-color);
  position: relative;
  &.plain-disabled,
  &.disabled {
    filter: opacity(0.6);
  }
  &.disabled {
    pointer-events: none;
  }
  &:not(.actived) .icon-row {
    filter: opacity(0.4);
  }
  // &.active {
  //   position: relative;
  //   &::after {
  //     content: '';
  //     display: block;
  //     width: 8rpx;
  //     height: 8rpx;
  //     position: absolute;
  //     top: 8rpx;
  //     right: 8rpx;
  //     border-radius: 50%;
  //     background-color: #42b983;
  //   }
  // }
  > .row {
    text-align: center;
  }
  .title {
    font-weight: 500;
    font-size: 24rpx;
    line-height: 40rpx;
  }
  .desc {
    font-weight: 400;
    font-size: 20rpx;
    line-height: 40rpx;
  }
  .icon-row,
  .icon {
    width: 100%;
    height: 100%;
  }
  .tip-popup {
    position: absolute;
    left: 50%;
    width: fit-content;
    height: 50rpx;
    font-weight: 700;
    font-size: 28rpx;
    line-height: 34rpx;
    padding: 10rpx 8rpx;
    color: #ffffff;
    background-color: var(--primary-color);
    box-sizing: border-box;
    white-space: nowrap;
    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 16rpx solid transparent;
      border-right: 16rpx solid transparent;
      position: absolute;
      left: 50%;
    }
    &.placement-top {
      top: 0;
      transform: translate(-50%, -100%);
      &::after {
        bottom: 0;
        border-top: 16rpx solid var(--primary-color);
        transform: translate(-50%, 100%);
      }
    }
    &.placement-bottom {
      bottom: 0;
      transform: translate(-50%, 100%);
      &::after {
        top: 0;
        border-bottom: 16rpx solid var(--primary-color);
        transform: translate(-50%, -100%);
      }
    }
  }
}
</style>
